<!DOCTYPE html>
<html lang="en">

<header>
	<input type="hidden" name="dataCantUsers" id="dataCantidadUsuarios" value="{{dataCantidadUsuarios}}"/>
	<input type="hidden" name="dataPercCpu" id="dataPorcentajeCpu" value="{{dataPorcentajeCpu}}"/>
	<input type="hidden" name="dataPercMem" id="dataPorcentajeMemoria" value="{{dataPorcentajeMemoria}}"/>
	<input type="hidden" name="mac_pc" id="mac" value="{{mac}}"/>
    <div class="header-content"> 
        <div class="row" style="float: none; margin: 0 auto;">       
            <h1> PC: {{ pc.mac }} </h1>
            <p>&nbsp;</p>
            <table id="graphics" style="margin:0 auto;">
            	<tr>
            		<td>
						<div style="height:500px; width:450px;" id="graphicCantUsers"></div>
					</td>
					<td>
						<div style="height:500px; width:450px;" id="graphicCpuPerc"></div>
					</td>
					<td>
						<div style="height:500px; width:450px;" id="graphicMemPerc"></div>	
					</td>
				</tr>
			</table>
			<script>
				d = document.getElementById("dataCantidadUsuarios").value
				g = new Dygraph(
			    				document.getElementById("graphicCantUsers"),
								d,
				                 {
									legend: 'always',
									animatedZooms: true,
									title: 'Cantidad de Usuarios por Tiempo',
									showRoller: true,
									rollPeriod: 1,
									ylabel: 'Cantidad Usuarios',
				                 });
				d = document.getElementById("dataPorcentajeCpu").value
				g = new Dygraph(
			    				document.getElementById("graphicCpuPerc"),
								d,
				                 {
									legend: 'always',
									animatedZooms: true,
									title: 'Porcentaje Uso de CPU',
									showRoller: true,
									rollPeriod: 1,
									ylabel: 'Porcentaje CPU',
				                 });
				d = document.getElementById("dataPorcentajeMemoria").value
				g = new Dygraph(
			    				document.getElementById("graphicMemPerc"),
								d,
				                 {
									legend: 'always',
									animatedZooms: true,
									title: 'Porcentaje Uso de Memoria',
									showRoller: true,
									rollPeriod: 1,
									ylabel: 'Porcentaje Memoria',
				                 });

			</script>
        </div>
    </div>
</header>

</html>